<template>
  <div class="page">
    <myHeader class="my-header"></myHeader>


    <div class="container">
      <div class="plate1">
        <div class="plate1-left plate1-left1">
          <div class="plate1-title">肝美靈</div>

          <div>
            <img style="width: 100%;" src="../assets/gml.jpg" alt="">
          </div>

          <div class="gongxiao">護肝鐵三角,全面保護肝活力</div>
          <div class="plate1-left-content">淨化解毒：促進酒精分解,減少肝臟脂肪積存,防止宿醉頭疼
            修復受損 促進啟動Nrf2/HO-1信號通路,提升肝臟抗氧化及抗氧能力,快速修復受損DNA
            全面強化：強化肝臟機能,更新肝臟組織,減輕肝臟原纖維增生程度,對化學性肝損傷有一定的輔助保護作用
          </div>

          <div class="gongxiao">大功效,呵護小心肝</div>
          <div class="plate1-left-content">疏肝淨化：加強肝臟細胞修補和更新,迅速強化肝臟,減少肝脂肪積聚。
            清肝利膽：改善肝功能,分泌膽汁,助消化、滋潤胃膽及脾臟,預防煙酒過多引起的酒精性肝病。
            促修復抗損傷：保護肝臟,抵抗酒精及人體無法分解的毒素,抗肝臟脂肪變性,改善肝臟病理損害。
            護肝再生：強化及修復肝臟,加強體內蛋白質合成,促進肝細胞新生。
            消炎鎮痛：保護肝細胞膜,並有抗輻射作用,減少其他自由基的傷害,抗發炎減輕痛楚。</div>


        </div>
        <div class="plate1-right plate1-right1">


          <div class="gongxiao">主要成分</div>
          <div>
            <img style="width: 100%;" src="../assets/gml2.jpg" alt="">
          </div>

          <div class="plate1-right-content">葛根枳椇子複合物、胱氨酸、酵母提取物、還原型薑黃素 BCM-95® 、乙醛脫氫酶、乙醇脫氫酶 、NAD 煙醯胺腺嘌呤二核苷酸
            、維生素B2、天然牛磺酸
          </div>

          <div class="gongxiao">由內呵護,為肝減負煥生機</div>
          <div class="plate1-right-content">
            1.喝酒不宿醉：解酒醒酒,加速酒精代謝,應酬好幫手。
            2.疏肝排毒：夜夜笙歌不爆肝。
            3.促修復抗損傷：增加肝動力。
            4.消炎鎮痛：改善腸胃不適。
          </div>


          <div class="gongxiao">由內呵護,為肝減負煥生機</div>
          <div class="plate1-right-content">
            1.喝酒不宿醉：解酒醒酒,加速酒精代謝,應酬好幫手。
            2.疏肝排毒：夜夜笙歌不爆肝。
            3.促修復抗損傷：增加肝動力。
            4.消炎鎮痛：改善腸胃不適。
          </div>


          <div class="gongxiao">適用人群：</div>
          <div class="plate1-right-content">
            長期應酬者：聚餐派對酒局,容易宿醉。
            長期熬夜者：常常加班熬夜,開黑追劇,失眠難入睡,皮膚狀態差。
            飲食油膩者：喜歡油膩飲食,管不住嘴,邁不開腿。
            吸煙者：明知傷身,耐不住煙癮大。
            需要養肝護肝者：有肝臟問題,需要日常調理。
            情緒起伏者：工作或生活壓力大,易怒。

          </div>


          <div class="gongxiao">服用方法</div>
          <div class="plate1-right-content">
            成人。餐後溫水送服,每日1-2次,每次2粒。社交應酬人士請於飲酒前半小時服用2粒,效果更佳。
          </div>


        </div>
      </div>
    </div>


    <myFooter></myFooter>
  </div>


</template>

<script>
import myFooter from '../components/myFooter.vue';
import myHeader from '../components/myHeader.vue';


export default {
  name: 'HomePage',
  components: {
    myFooter,
    myHeader
  },
  data() {
    return {
      currentCls: 0,
      totalNum: 0,
      pageSize: 6,
      pageIndex: 1,
      classify: [
        { name: '所有产品' },
        { name: '高端功效型' },
        { name: '母婴莉莉斯' },
        { name: '日销爆款' },
        { name: '香港濟風堂' }
      ],
      list: [],
    }
  },
  async mounted() {
    let params = {
      searchStr: '',
      category: null,
      pageSize: this.pageSize,
      pageIndex: this.pageIndex
    }
    this.getData(params);

  },
  methods: {
    backTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    },

    async getData(params) {
      try {
        let res = await this.$api.productList(params);
        this.list = res.data.data;
        this.totalNum = res.data.totalNum;
        console.log(this.list)
      } catch (err) {
        console.log(err)
      }
    },


    currentChange(index) {
      // console.log(e);
      this.currentCls = index;

      let params = {
        searchStr: '',
        category: this.currentCls,
        pageSize: this.pageSize,
        pageIndex: this.pageIndex
      }
      this.getData(params);

    },

    pageChange(e) {
      console.log(e);
      let params = {
        searchStr: '',
        category: null,
        pageSize: this.pageSize,
        pageIndex: e
      }
      this.getData(params);
    }
  }
}
</script>

<style lang="less" scoped>
/* 定义动画 */
@keyframes moveright {
  0% {
    transform: translateX(-2);
  }

  50% {
    transform: translateX(8px);
  }

  100% {
    transform: translateX(-2px);
  }
}

.page {
  .container {
    padding-top: 115px;
    width: 100%;
    margin: 0 auto;

    .model-1 {
      padding-top: 50px;
      display: flex;
      justify-content: space-between;

      .p-left {
        width: 269px;

        .p-left-title {
          font-size: 30px;
          margin-bottom: 20px;
        }

        .p-left-item {
          width: 269px;
          background-color: #1a7567;
          height: 50px;
          line-height: 50px;
          color: white;
          display: flex;
          padding: 0 10px;
          justify-content: space-between;
          margin-bottom: 5px;
          border-radius: 10px;

          .current-icon {
            animation: moveright 1s infinite;
          }
        }

        .currentCls {
          background-color: #07483e;
          width: 272px;
          height: 54px;
          line-height: 54px;
        }
      }

      .p-pagin {
        margin: 10px;
      }

      .p-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 30px 30px 30px;

        // &::after {
        //     content: '';
        //     flex: auto;
        // }

        .p-item {
          // height: 484px;
          background: white;
          margin: 10px;
          padding: 10px;
          font-size: 18px;
          box-shadow: 0px 0px 10px #b0b0b0;
          border-radius: 5px;

          .p-item-yj {
            text-decoration: line-through;
          }

          .p-item-xj {
            font-weight: 700;
            margin-left: 10px;
          }

          .p-item-title {
            overflow: hidden;
            height: 28px;
            width: 232px;
          }


          .p-item-img {
            width: 232px;
            height: 232px;
          }

        }
      }
    }
  }
}


.banner-box {
  text-align: center;
  background-color: #e9e9eb;
  margin-top: 105px;

  .banner {
    width: 100%;
    display: block;
  }
}

.video-box {
  padding: 20px 10vw 0 10vw;

  .publicity-video {
    width: 100%;
  }
}


.plate1-1 {
  border-bottom: 1px solid #ddd;
}

.plate1-2 {
  border-bottom: 1px solid #ddd;
}

.plate1-3 {
  border-bottom: 1px solid #ddd;
}

.plate1-4 {
  border-bottom: 1px solid #ddd;
}

.plate1-5 {
  border-bottom: 1px solid #ddd;
}

.plate1-6 {
  border-bottom: 1px solid #ddd;
}

.plate1 {
  padding-top: 60px;
  display: flex;
  justify-content: space-between;
  line-height: 24px;

  .plate1-left {
    width: 37.6%;

    .gongxiao {
      font-size: 20px;
      font-weight: 700;
    }

    .plate1-title {
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .plate1-left-content {
      font-size: 13px;
    }
  }

  .plate1-left1 {
    width: 48%;
  }



  .plate1-right {
    width: 57.2%;

    .gongxiao {
      font-size: 20px;
      font-weight: 700;
    }

    .plate1-title {
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .plate1-right-content {
      font-size: 13px;
    }

    .plate1-right-mid {
      display: flex;
      justify-content: space-around;
      font-size: 16px;


      .plate1-right-mid-cell {
        text-align: center;

        .iconfont {
          font-size: 36px;
          font-weight: 500;
          margin-bottom: 10px;
        }
      }


    }

    .plate1-right-foot {
      .p-list {
        display: flex;

        .p-item {
          text-align: center;

          .p-item-img {
            width: 200px;
          }
        }
      }
    }

  }


  .plate1-right1 {
    width: 48%;
  }
}

@media (min-width: 1200px) {
  .plate1 {
    width: 1170px;
    margin: 0 auto;
  }
}





.honor {
  .honoe-title {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    padding: 20px 0;
  }

  .honor-box {
    margin: 10px 0;
    display: flex;
    padding: 0 10vw;
    justify-content: space-around;
    flex-wrap: wrap;

    .cer-img {
      width: 117px;
      height: auto;
    }
  }

}



.back-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  border-radius: 5px;
  background-color: black;
  color: white;
}

@media (max-width: 768px) {
  .banner {
    width: 100vw;
  }

  .plate1 {
    display: block;
    padding-top: 30px;

    .plate1-left {
      width: 100%;
      padding: 10px 5% 0 5%
    }

    .plate1-right {
      width: 100%;
      padding: 10px 5% 0 5%;

      // .plate1-right-content {
      //   font-size: 13px;
      //   color: red;
      // }

      .plate1-right-foot {
        .p-list {
          display: flex;

          .p-item {
            text-align: center;

            .p-item-img {
              width: 100px !important;
            }
          }
        }
      }
    }
  }

  .video-box {
    padding: 5px 0vw 0 0vw;

    .publicity-video {
      width: 100%;
    }
  }


  .honor {
    .honoe-title {
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      padding: 20px 0;
    }

    .honor-box {
      margin: 10px 0;
      display: flex;
      padding: 0 10vw;
      justify-content: space-around;
      flex-wrap: wrap;

      .cer-img {
        width: 90px;
        height: auto;
      }
    }

  }


  .p-list {
    padding: 0;
    flex-wrap: wrap;
  }

  .p-item-img {
    width: 90vw !important;
    height: auto !important;
  }

  .footer {
    height: 138px;
  }
}







@media (max-width: 768px) {
  .banner {
    width: 100vw;
  }


  .p-list {
    padding: 0;
    flex-wrap: wrap;

    .p-item {
      background: white;
      margin: 5px;
      padding: 10px;
      font-size: 18px;

      // width: 45vw !important;
      // height: auto !important;

      .p-item-yj {
        text-decoration: line-through;
      }

      .p-item-xj {
        font-weight: 700;
        margin-left: 10px;
      }

      .p-item-title {
        overflow: hidden;
        font-size: 14px;
        width: 40vw !important;
        height: auto !important;
      }


      .p-item-img {
        width: 150px !important;
        height: 150px !important;
      }

    }
  }

  .footer {
    height: 138px;
  }
}
</style>